<script lang="ts" setup>
import type { IMenu } from '../../../store/menu'
import { Tree } from '@pkgs/utils'
import { cloneDeep } from 'lodash-es'
import { MenuNodeType } from '../../../enums'
import useConfigStore from '../../../store/config'
import useMenuStore from '../../../store/menu'
import useTabStore from '../../../store/tab'
import { isMicro } from '../../../utils'
import SubMenu from './sub-menu.vue'

interface IProps {
  isCollapse: boolean
}

defineOptions({ name: 'AppAside' })

const { isCollapse } = defineProps<IProps>()

const menuRef = ref()

const route = useRoute()
const router = useRouter()

const menuStore = useMenuStore()
const tabStore = useTabStore()
const configStore = useConfigStore()

const customStyle = computed(() => {
  return {
    backgroundColor: configStore.getPageRegionColor.ASIDE.background,
    color: configStore.getPageRegionColor.ASIDE.text,
  }
})

const menus = computed(() => {
  const menus = cloneDeep(menuStore.getMenus.filter(({ visible }) => visible))
  new Tree<IMenu>().traversal(menus, (menu) => {
    if ((menu.children || []).length > 0) {
      menu.children
      = (menu?.children ?? [])
          .filter(({
            visible,
            type,
          }) => visible && [MenuNodeType.MENU].includes(type))
    }
  })
  return menus
})

function onSelect(code: string) {
  const menu = new Tree<IMenu>().findNode(toValue(menus), node => node.code === code)

  if (menu.href) {
    nextTick(() => {
      menuRef.value.updateActiveIndex(tabStore.getCurrentTabCode)
    })
    window.open(menu.href)
  }
  else {
    tabStore.addTab(menu)
    if (!isMicro(route.path))
      router.push(menu.path)
  }
}
</script>

<template>
  <div
    class="app-aside"
    :style="customStyle"
  >
    <ElMenu
      ref="menuRef"
      class="h-full pl-4px pr-4px"
      :default-active="tabStore.getCurrentTabCode"
      :collapse="isCollapse"
      :background-color="configStore.getPageRegionColor.ASIDE.background"
      :text-color="configStore.getPageRegionColor.ASIDE.text"
      :persistent="false"
      unique-opened
      @select="onSelect"
    >
      <SubMenu
        v-for="menu in menus"
        :key="menu.code"
        :menu="menu"
        :is-collapse="isCollapse"
      />
    </ElMenu>
  </div>
</template>

<style lang="less" scoped>
.app-aside {
  --el-menu-border-color: transparent;
  background-color: var(--el-bg-color);
  overflow-y: auto;
  block-size: 100%;
}

:deep(.el-menu--collapse) {
  inline-size: 100%;
}

:deep(.el-menu) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 4px;
}

:deep(.el-sub-menu .el-menu) {
  padding-block-start: 0;
  padding-block-end: 0;
}

:deep(.el-menu-item.el-menu-item),
:deep(.el-sub-menu__title) {
  block-size: 40px;
  padding: 8px;
  border-radius: 12px;
}

:deep(.el-menu-item.is-active) {
  background-color: var(--el-color-primary);
  color: var(--el-text-white);
}

:deep(.el-sub-menu) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:deep(.el-menu-tooltip__trigger),
:deep(.el-sub-menu__title.el-tooltip__trigger) {
  justify-content: center;
}
</style>
